<template>
  <div>
    <Table stripe :columns="columns" :data="data" max-height="320"></Table>
  </div>
</template>

<script>
import bus from 'emitvue';
// 特别注意 这是软件右边显示棋谱的组件
export default {
  name: "fgnList",
  data() {
    return {
      columns: [
        {
          title: "步数",
          key: "step",
        },
        {
          title: '白',
          key: 'white'
        },
        {
          title: '黑',
          key: 'black'
        },
      ],
      data: [],
      history : [],
    }
  },
  methods: {
    parseFgn(fgn) {
      this.data = [];
      let black = [];
      let white = [];
      // 先把黑白分开
      for (let i = 0; i < fgn.length; i++) {
        let step = fgn[i];
        if (i % 2 === 0) {
          white.push(step);
        } else {
          black.push(step)
        }
      }
      for (let i = 0; i < white.length; i++) {
        let list = {
          step: i + 1,
          white: white[i],
          // 白棋肯定会有 黑棋有可能还没开始下
          black: black[i] || '',
        }
        this.data.push(list);

      }
    },
  },
  created() {
    // 显示列表
    bus.$on('showFgnList', (fgnList) => {
      this.parseFgn(fgnList)
    })
    bus.$on('newGame', () => {
      this.data = [];
    })
  },
}
</script>

<style scoped>

</style>
